<script setup>
import { defineEmits, ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  inputClass: {
    type: String,
    default: ''
  },
  spanClass: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  maxlength: {
    type: Number,
    default: 20
  },
  minlength: {
    type: Number,
    default: 4
  },
  confirmInfo: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:modelValue'])
const updateValue = (e) => {
  emit('update:modelValue', e.target.value)
}

const input = ref(null)
const span = ref(null)

const togglePasswordVisibility = () => {
  if (props.type.includes('password')) {
    if (input.value.type == 'text') {
      input.value.type = 'password'
      span.value.style.backgroundImage = "url('/src/assets/svg/小眼睛-闭.svg')"
    } else {
      input.value.type = 'text'
      span.value.style.backgroundImage = "url('/src/assets/svg/小眼睛-睁.svg')"
    }
  }
}

const message = ref('')
import validate from '@/mixins/validate'
const { validateUserId, validatePassword, validateConfirmPwd } =
  validate.methods
const validateFunc = () => {
  if (props.type === 'text' && !props.confirmInfo.includes('令牌')) {
    message.value = validateUserId(
      props.modelValue,
      props.maxlength,
      props.minlength
    )
  } else if (props.type === 'password') {
    message.value = validatePassword(
      props.modelValue,
      props.maxlength,
      props.minlength
    )
  } else if (props.type === 'repassword') {
    message.value = validateConfirmPwd(props.confirmInfo, props.modelValue)
  }
}
</script>

<template>
  <div class="input-wrapper" :class="inputClass" :style="{ width }">
    <input
      ref="input"
      :type="type === 'repassword' ? 'password' : type"
      class="inputs"
      :value="modelValue"
      @input="updateValue"
      :maxlength="maxlength"
      :minlength="minlength"
      @keyup="validateFunc"
    />
    <span
      ref="span"
      class="span-icon"
      :class="spanClass"
      @click="togglePasswordVisibility"
    ></span>
    <div class="remind">{{ message }}</div>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/scss/abstracts/variables' as *;
@use '@/assets/scss/abstracts/mixins' as *;

.input-wrapper {
  position: relative;
  transition: all 0.3s;
  font-size: 1.2rem;

  .inputs {
    width: 100%;
    height: 6rem;
    display: block;
    border: none;
    border-radius: 1rem;

    background-color: $color-white-1;
    color: $color-black;
    padding: 2rem 6rem 0 3rem;

    outline: none;
    font-size: 1.6rem;
    letter-spacing: 2px;

    &:focus {
      outline: none;
      // border: 1px solid rgb(21, 139, 243);
      // box-shadow: 0 1px 2px rgb(21, 139, 243);
    }
  }

  &::before {
    display: block;
    width: 5rem;
    height: 1rem;
    color: $color-grey-1;
    position: absolute;
    top: 1rem;
    left: 3rem;
    white-space: nowrap;
  }

  .span-icon {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    z-index: 1;
    white-space: nowrap;
    top: 2rem;
    right: 1.5rem;
  }

  .remind {
    height: 2rem;
    line-height: 3rem;
    font-size: 1.2rem;
    width: 100%;
    margin-left: 2.7rem;

    color: $color-wrong;
  }
}
</style>
